import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Modal, Form, Input,Select ,Table,Button,Row,Col,} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
var _from;

class InventorySheetResultModal extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {    
    _from = this.props.form;
    const { children, dispatch,detailList,item,assetCurrentSize,assetCurrent,assetTotal } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    }; 
   
    const searchHandle = () => {
        this.props.form.validateFields((err, values) => {
        var data ={sheetId:values.sheetId,status:values.status};
        dispatch({
          type: 'inventorySheet/searchAsset',
          payload:data,
        })
      });
    }; 

      const paginationDetail = {
        current:assetCurrent,
        pageSize:assetCurrentSize,
        total: assetTotal,
        showSizeChanger: true,
        showTotal: (total => '共' + assetTotal + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'inventorySheet/searchAsset',
                payload: {...{'pageNum':current, 'pageSize':size,'sheetId':item.id_,"status":_from.getFieldValue("status")} },
            });
        },
        onChange(current) {
            dispatch({ 
                type: 'inventorySheet/searchAsset', 
                payload: { ...{'pageNum':current, 'pageSize':assetCurrentSize,'sheetId':item.id_,"status":_from.getFieldValue("status")} },
            });
        },
    };


    const columns = [{
        title: '盘点状态',
        fixed: 'left',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        render: (value, row, index) => {
            return (
              value==1?"未盘":value==2?"差异":value==3?"正常":value==4?"盘亏":value==5?"盘盈":""
            )
        }
      },{
        title: '资产编号',
        fixed: 'left',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 130
      },{
        title: 'RFID编码',
        fixed: 'left',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 100
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 140
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 100,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 100,
      },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 120,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '台账U位',
        dataIndex: 'ledgerU',
        key: 'ledgerU',
        width: 80,
      }
      ,{
        title: '实际机房',
        dataIndex: 'actualRoomName',
        key: 'actualRoomName',
        width: 120,
      },{
        title: '实际机柜',
        dataIndex: 'actualCabinetName',
        key: 'actualCabinetName',
        width: 120,
      },{
        title: '实际U位',
        dataIndex: 'actualU',
        key: 'actualU',
        width: 100,
      }
    ];  
    return (
      <span>
        <Modal           
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                style={{ top: 50}}
                width={800}
                visible={this.props.visible}
                footer={[
                  <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                ]}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{width:'auto',height:document.body.clientHeight - 230,position:'relative',backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px',paddingRight:'20px'}}>
                <Form style={{height:'70px'}}>
                    <FormItem style={{marginBottom:'0px'}}>
                      {getFieldDecorator('sheetId',{initialValue:item.id_})(
                        <Input type="hidden"/>
                      )} 
                    </FormItem>
                     <Row>
                      <Col span={3}>
                        <FormItem
                          {...formItemLayout}
                            label="正常"
                          >
                          {
                            getFieldDecorator('normal', {
                              initialValue: item.normal==undefined?'0':item.normal,                  
                            })(<Input readOnly="readonly" />)
                          }
                        </FormItem>  
                      </Col>
                      <Col span={3}>
                        <FormItem
                            {...formItemLayout}
                              label="盘亏"
                            >
                            {getFieldDecorator('loss', {
                                initialValue: item.loss==undefined?'0':item.loss,                  
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>
                      <Col span={3}>
                        <FormItem
                            {...formItemLayout}
                              label="盘盈"
                            >
                            {getFieldDecorator('over', {
                                initialValue: item.over==undefined?'0':item.over,                    
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>
                      <Col span={3}>
                        <FormItem
                            {...formItemLayout}
                              label="差异"
                            >
                            {getFieldDecorator('different', {
                                initialValue: item.different==undefined?'0':item.different,                       
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>
                      <Col span={3}>
                        <FormItem
                            {...formItemLayout}
                              label="总计"
                            >
                            {getFieldDecorator('total', {
                                initialValue: item.totalCount,                       
                              })(<Input readOnly="readonly" />)}
                        </FormItem> 
                      </Col>

                       <Col span={6}>
                         <FormItem
                            {...formItemLayout}
                              label="状态"
                              hasFeedback
                            >
                            {getFieldDecorator('status')(
                                <Select
                                    showSearch
                                    placeholder="选择状态"
                                    optionFilterProp="children"  
                                 >                                 
                                  <Option value="">全部</Option>
                                  <Option value="3">正常</Option>
                                  <Option value="4">盘亏</Option>
                                  <Option value="5">盘盈</Option>
                                  <Option value="2">差异</Option>
                                </Select>     
                              )}
                        </FormItem>                    
                      </Col>
                      <Col span={2}>
                         <div style={{paddingLeft:'30px',paddingRight:'20px'}}>
                            <Button size="large" style={{ marginRight: '10px' }} onClick={searchHandle} type="primary" className='ant-search-btn'>搜索</Button>
                        </div>
                      </Col>
                    </Row>   
                    <Row>
                     <Col span={24}>
                     <hr style={{width:'750px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                   </Row>

                </Form>    
            </div>          

             <div style={{minHeight:'100%'}}>
                <div style={{width:'100%',height:'100%',paddingLeft:'20px'}}>
                      <Table columns={columns}
                          loading={this.props.confirmLoading}
                          rowKey={record => record.id_}                  
                          dataSource={detailList} 
                          pagination={paginationDetail} 
                          scroll={{ y: document.body.clientHeight - 360,x: 1600 }}
                    />
                </div>
            </div>              
            </div>          
        </div>
        </Modal>
        
      </span>
    );
  }
    
}

export default Form.create()(InventorySheetResultModal)
